<!DOCTYPE html>
<html>
<head>
<script src="layui/layui.js" type="text/javascript" charset="UTF-8"></script>
<link href="layui/css/layui.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.8.2.js" charset="UTF-8"></script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table id="demo" lay-filter="test"></table>
 
<script src="/layui/layui.js"></script>
<script>
layui.use('table', function(){
  var table = layui.table;
  
  //第一个实例
  table.render({
    elem: '#demo'
    ,height: 315
    ,url: 'XwCxServlet' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'id', title: 'ID',  sort: true, fixed: 'left'}
      ,{field: 'Sacrifice', title: '新闻标题', }
      ,{field: 'shiji', title: '时间',}
      ,{field: 'Xinwen', title: '新闻', } 
      ,{field: 'Feilei', title: '分类', }

      ,{field: 'right', align:'center',toolbar:'#barDemo'}
    ]]
  });
 
//监听工具条
  table.on('tool(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
	  var data = obj.data; //获得当前行数据
	  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
	  var tr = obj.tr; //获得当前行 tr 的DOM对象
	  console.log(data);
	  if (layEvent === 'detail') { //查看
	    
	   //do somehing
	  } else if (layEvent === 'del') { //删除
	   layer.confirm('真的删除行么', function(index) {
	    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
	    layer.close(index);
	    //向服务端发送删除指令
	    //写对应ajax
	    $.ajax({ 
	     url : "XwScServlet",

	     type : "get",//请求方式
	     data : {//参数
	      id : data.id
	     },
	     success : function(res) {//成功以后的回调函数
	      if (res == 1) {
	       alert("删除成功！");
	       window.location.reload();
	      } else {
	       alert("删除失败！");
	      }
	     }
	    });

	   });
	   } else if(layEvent === 'edit'){ //编辑
	     //do something
	     
	     layer.open({
	       type : 1, //Page层类型
	       area : [ '800px', '400px' ],
	       title : [ '编辑新闻信息', 'font-size:18px' ],
	       shadeClose : true,
	       shade : 0, //遮罩透明度
	       maxmin : true, //允许全屏最小化
	       content : $("#updateForm"), //弹窗路径
	       success : function(layero, index) {
	        $('#id').val(data.id);
	        $('#Sacrifice').val(data.Sacrifice);
	        $('#shiji').val(data.shiji);
	        $('#Xinwen').val(data.Xinwen);
	        $('#Feilei').val(data.Feilei);
	        $('#imgUrl').attr("src", data.imgUrl);
	       },

	      });
	  
	 	layui.use('upload', function() {
	 		var upload = layui.upload;

	 		//执行实例
	 		var uploadInst = upload.render({
	 			elem : '#img' //绑定元素
	 			,
	 			url : 'upload' //上传接口
	 			,
	 			done : function(res) {
	 				//上传完毕回调
	 				$("img").attr("src", res.data);
	 			},
	 			error : function() {
	 				//请求异常回调
	 				//alert("上传失败");
	 			}
	 		});
	 	});

	 	layui.use([ 'laydate', 'form' ], function() {
	 		var laydate = layui.laydate;
	 		var form = layui.form;
	 		//执行一个laydate实例
	 		laydate.render({
	 			elem : '#createdate' //指定元素
	 		});

	 		
	 		form.on('submit(qwe)', function(data) {
	 			console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
	 			console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
	 			console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}

	 			data.field.imgurl = $("img").attr("src");

	 			//写对应ajax
	 			$.ajax({
	 				url : "XwXgServlet",//地址
	 				type : "get",//请求方式
	 				data : data.field,
	 				success : function(res) {//成功以后的回调函数
	 					if (res == 1) {
	 						alert("修改成功！");
	 						window.location.reload();
	 					} else {
	 						alert("修改失败！");
	 					}
	 				}
	 			});

	 			return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
	 		});

	 	});
	 }
	 });

	 });
 </script>
	 	<script type="text/html" id="imgTpl">
	     < img src="{{d.imgUrl}}" />
	  </script>
 <!-- 行内工具栏 -->
 <script type="text/html" id="barDemo">
        
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</ a>
     <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</ a>
 </script>
<div id="updateForm" style="display: none">
  <form class="layui-form" lay-filter="updateform">
   <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
   <div class="layui-form-item">
    <label class="layui-form-label">编号</label>
    <div class="layui-input-block">
     <input type="text" name="id" placeholder="请输入" autocomplete="off"
      class="layui-input" id="id" disabled="disabled">
    </div>
   </div>
   
   <div class="layui-form-item">
    <label class="layui-form-label">新闻标题</label>
    <div class="layui-input-block">
     <input type="text" name="Sacrifice" placeholder="请输入"
      autocomplete="off" class="layui-input" id="Sacrifice">
    </div>
   </div>
   
   <div class="layui-form-item">
    <label class="layui-form-label">时间</label>
    <div class="layui-input-block">
     <input type="text" name="shiji" placeholder="请输入"
      autocomplete="off" class="layui-input" id="shiji">
    </div>
   </div>
   <div class="layui-form-item">
    <label class="layui-form-label">新闻</label>
    <div class="layui-input-block">
     <input type="text" name="Xinwen" placeholder="请输入"
      autocomplete="off" class="layui-input" id="Xinwen" >
    </div>
   </div>

   <div class="layui-form-item">
  <label class="layui-form-label" >新闻分类</label>
  <div class="layui-input-block" >
    <select name="fl" lay-verify="" id="fl" >
    <option value="">请选择一个分类</option>
    <option value="0">产品新闻</option>
    <option value="1">公司新闻</option>
	<option value="2">相关新闻</option>
    </select>
  </div>
</div>
   
     <div class="layui-form-item">
    <div class="layui-input-block">
     <button class="layui-btn" lay-submit lay-filter="qwe">立即提交</button>
     <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
   </div>
   <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
  </form>
</body>
</html>